<script setup lang="ts">
import { initFetchData } from './RightLayerManager.module'
import type { OperationType, LayerType } from './RightLayerManager.module'

const operationList = ref<Array<OperationType>>([
  {
    label: '新建',
    type: 'add',
    imgUrl: `<svg width="20px" height="20px"> <path fill-rule="evenodd"  fill="rgb(255, 255, 255)" d="M18.037,0.622 L1.962,0.622 C1.225,0.622 0.623,1.225 0.623,1.962 L0.623,18.037 C0.623,18.774 1.225,19.376 1.962,19.376 L18.037,19.376 C18.774,19.376 19.376,18.774 19.376,18.037 L19.376,1.962 C19.376,1.225 18.774,0.622 18.037,0.622 L18.037,0.622 ZM14.454,10.669 L10.669,10.669 L10.669,14.454 C10.669,14.822 10.367,15.123 9.999,15.123 C9.631,15.123 9.329,14.822 9.329,14.454 L9.329,10.669 L5.545,10.669 C5.177,10.669 4.875,10.368 4.875,10.000 C4.875,9.631 5.177,9.330 5.545,9.330 L9.329,9.330 L9.329,5.545 C9.329,5.177 9.631,4.876 9.999,4.876 C10.367,4.876 10.669,5.177 10.669,5.545 L10.669,9.330 L14.454,9.330 C14.822,9.330 15.123,9.631 15.123,10.000 C15.123,10.368 14.822,10.669 14.454,10.669 L14.454,10.669 Z"/> </svg>`,
    state: false,
  },
  {
    label: '编辑',
    type: 'edit',
    imgUrl: `<svg width="19px" height="20px"> <path fill-rule="evenodd"  fill="rgb(255, 255, 255)" d="M17.403,0.632 L1.345,0.632 C0.606,0.632 0.007,1.231 0.007,1.970 L0.007,18.029 C0.007,18.768 0.606,19.367 1.345,19.367 L17.403,19.367 C18.142,19.367 18.741,18.768 18.741,18.029 L18.741,1.970 C18.741,1.616 18.600,1.275 18.349,1.024 C18.099,0.773 17.758,0.632 17.403,0.632 L17.403,0.632 ZM1.588,17.727 L2.581,13.330 L6.116,16.864 L1.588,17.727 ZM6.965,16.329 L3.178,12.556 L10.713,4.981 L14.500,8.769 L6.965,16.329 ZM15.476,7.818 L11.689,4.031 L13.589,2.145 L17.403,5.985 L15.476,7.818 Z"/> </svg>`,
    state: false,
  },
  {
    label: '删除',
    type: 'delete',
    imgUrl: `<svg width="19px" height="20px"> <path fill-rule="evenodd"  fill="rgb(255, 255, 255)" d="M17.465,0.320 L1.407,0.320 C0.668,0.320 0.069,0.919 0.069,1.658 L0.069,17.716 C0.069,18.455 0.668,19.054 1.407,19.054 L17.465,19.054 C18.205,19.054 18.804,18.455 18.804,17.716 L18.804,1.658 C18.804,1.303 18.663,0.963 18.412,0.712 C18.161,0.461 17.821,0.320 17.465,0.320 L17.465,0.320 ZM3.205,4.528 C3.205,4.100 3.554,3.753 3.984,3.753 L7.882,3.753 L7.882,2.980 C7.882,2.552 8.231,2.206 8.662,2.206 L10.221,2.206 C10.652,2.206 11.001,2.553 11.001,2.981 L11.001,3.756 L14.898,3.756 C15.328,3.756 15.678,4.102 15.678,4.530 L15.678,5.305 L3.205,5.305 L3.205,4.528 ZM14.898,6.850 L14.898,16.397 C14.898,16.825 14.549,17.172 14.118,17.172 L4.764,17.172 C4.333,17.172 3.984,16.825 3.984,16.397 L3.984,6.077 L14.898,6.077 L14.898,6.850 ZM7.102,8.399 C7.102,7.971 6.752,7.624 6.323,7.624 C5.893,7.624 5.544,7.971 5.544,8.399 L5.544,14.851 C5.544,15.278 5.893,15.625 6.323,15.625 C6.755,15.625 7.104,15.278 7.104,14.851 L7.104,8.399 L7.102,8.399 ZM10.221,8.399 C10.221,7.971 9.871,7.624 9.442,7.624 C9.010,7.624 8.662,7.971 8.662,8.399 L8.662,14.851 C8.662,15.278 9.012,15.625 9.442,15.625 C9.871,15.625 10.221,15.278 10.221,14.851 L10.221,8.399 ZM13.339,8.399 C13.339,7.971 12.989,7.624 12.559,7.624 C12.128,7.624 11.779,7.971 11.779,8.399 L11.779,14.851 C11.779,15.278 12.130,15.625 12.559,15.625 C12.989,15.625 13.339,15.278 13.339,14.851 L13.339,8.399 Z"/> </svg> `,
    state: false,
  },
  {
    label: '导出',
    type: 'export',
    imgUrl: `<svg width="20px" height="20px"> <path fill-rule="evenodd"  fill="rgb(255, 255, 255)" d="M18.912,0.712 C18.661,0.461 18.321,0.320 17.966,0.320 L1.907,0.320 C1.168,0.320 0.569,0.919 0.569,1.658 L0.569,17.716 C0.569,18.455 1.168,19.054 1.907,19.054 L17.966,19.054 C18.705,19.054 19.304,18.455 19.304,17.716 L19.304,1.658 C19.304,1.303 19.163,0.963 18.912,0.712 ZM17.130,13.644 C17.130,15.221 15.839,16.511 14.262,16.511 L5.658,16.511 C4.080,16.511 2.790,15.221 2.790,13.644 L2.790,7.191 C2.790,5.613 4.080,4.323 5.658,4.323 L6.446,4.323 C6.876,4.323 7.163,4.609 7.163,5.039 C7.163,5.470 6.876,5.757 6.446,5.757 L6.374,5.757 C5.084,5.900 4.009,6.402 4.224,8.625 L4.224,12.209 C4.224,13.787 4.224,15.078 7.092,15.078 L12.828,15.078 C15.624,15.078 15.696,13.859 15.696,12.353 L15.696,11.493 C15.696,11.062 15.982,10.775 16.413,10.775 C16.771,10.775 17.130,11.134 17.130,11.493 L17.130,13.644 ZM16.771,7.836 L12.828,10.919 C12.684,11.062 12.469,11.134 12.254,11.134 C12.111,11.134 11.967,11.062 11.824,10.991 C11.465,10.775 11.250,10.417 11.250,10.059 L11.250,9.127 C8.669,9.127 6.446,10.847 5.658,13.214 C5.443,12.568 5.299,11.851 5.299,11.134 C5.299,7.693 7.952,4.968 11.179,4.968 L11.179,3.964 C11.179,3.534 11.394,3.175 11.752,3.032 C11.895,2.889 12.039,2.889 12.182,2.889 C12.397,2.889 12.612,2.960 12.828,3.104 L16.771,6.187 C16.986,6.330 17.130,6.689 17.130,6.975 C17.130,7.334 16.986,7.621 16.771,7.836 Z"/> </svg>`,
    state: false,
  },
])

const layerList = ref<Array<LayerType>>()

const firefightPlotStore = useFirefightPlotStore()
const { handleLayerOperation, handleLayerClick, getList } = initFetchData(firefightPlotStore, {
  layerList,
})

// 查询 图层数据
getList()

watch(
  () => firefightPlotStore.layerOperationFlag,
  (newV) => {
    if (newV) {
      getList()
      firefightPlotStore.layerOperationFlag = false
    }
  }
)
</script>
<template>
  <div class="layer-container">
    <!-- 标题 -->
    <div class="layer-title">标绘图管理</div>
    <!-- 图层操作 -->
    <div class="operation-content">
      <div
        v-for="operation in operationList"
        :key="operation.label"
        class="operation-list"
        @click="handleLayerOperation(operation)"
      >
        <div class="w-19px h-19px" v-html="operation.imgUrl" />
        <div class="operation-label">{{ operation.label }}</div>
      </div>
    </div>

    <!-- 图层list -->
    <div class="layer-content">
      <div
        v-for="layer in layerList"
        :key="layer.id"
        class="layer-list"
        :class="layer.state ? 'layer-list-active' : ''"
        @click="handleLayerClick(layer)"
      >
        <div class="select-none">{{ layer.bhtmc }}</div>
        <div class="layer-state">
          <div v-if="layer.state" class="layer-checked"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.layer-container {
  @apply absolute top-112px right-10px;
  width: 240px;
  height: 905px;
  border: 1px solid #0d609c;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.59) 0%, #00081d 100%);
  // background: rgba(1, 7, 17, 0.7);
  font-family: Microsoft YaHei;
  z-index: 99;
  padding: 10px;
}

.layer-title {
  @apply text-24px font-bold mt-6px ml-2px;
  color: #fffefe;
}

.operation-content {
  @apply flex flex-row mt-15px pb-10px;
  border-bottom: 1px solid #aaaaaa;

  .operation-list {
    @apply mr-15px flex  flex-col items-center cursor-pointer;
  }
  .operation-label {
    @apply text-14px font-400 mt-5px;
    color: rgba(255, 255, 255, 0.8);
  }
}

.layer-content {
  @apply mt-10px;
  .layer-list {
    @apply flex flex-row items-center justify-between;
    @apply px-8px py-9px box-border mb-10px cursor-pointer;
    width: 100%;
    height: 30px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid #aaaaaa;
    font-size: 14rpx;
    font-weight: 400;
    color: #ffffff;
  }

  .layer-list-active {
    width: 100%;
    height: 30px;
    background: rgba(15, 181, 235, 0.2);
    border: 1px solid #00ffff;
  }

  .layer-state {
    width: 10px;
    height: 10px;
    background: rgba(0, 0, 0, 0);
    border: 1px solid #aaaaaa;

    .layer-checked {
      position: relative;

      &::after {
        content: '';
        width: 7px;
        height: 3px;
        border: 1px solid #ffffff;
        border-top: transparent;
        border-right: transparent;
        text-align: center;
        display: block;
        position: absolute;
        top: 2px;
        left: 1px;
        transform: rotate(-45deg);
        border-radius: 0px;
        background: none;
      }
    }
  }
}
</style>
